<script setup lang="ts">
import { Icon, Search, Cell, CellGroup, Tab, Tabs } from 'vant';
import { ref, computed } from 'vue'
const value = ref('')
const active = ref(0);
const flag=ref(true)
const person = [
  {
    id: 1,
    remarks: "小梅",
    img: "/1.jpg",
    state: "WiFi",
    Dynamic: "不亏待每一份热情",
    type: "special"
  },
  {
    id: 2,
    remarks: "王美",
    img: "/1.jpg",
    state: "手机",
    Dynamic: "都没有",
    type: "people"
  },
  {
    id: 3,
    remarks: "王小丽",
    img: "/1.jpg",
    state: "手机",
    Dynamic: "本QQ已换人",
    type: "people"
  },
  {

    id: 4,
    remarks: "小王",
    img: "/1.jpg",
    state: "手机",
    Dynamic: "不亏待每一份热情",
    type: "people"
  },

  {
    id: 5,
    remarks: "lllii",
    img: "/1.jpg",
    state: "WiFi",
    Dynamic: "不亏待每一份热情",
    type: "people"
  },

  {
    id: 6,
    remarks: "李555",
    img: "/1.jpg",
    state: "WiFi",
    Dynamic: "一份热情",
    type: "people"
  },

]
const spli = computed(() => {
  return person.filter(item => item.type == "special")
})
</script>

<template>
  <div class="big">
    <div class="head">
      <img src="/1.jpg"><span class="sp1">联系人</span>
      <van-icon name="add-o" class="icon1" />
    </div>
    <div class="search">
      <van-search v-model="value" placeholder="请输入搜索关键词" />
    </div>
    <div class="message">
      <van-cell-group>
        <van-cell title="新朋友" value="" is-link />
        <van-cell title="群通知" value="" is-link />
      </van-cell-group>
    </div>
    <div class="list">
      <van-tabs v-model:active="active" title-active-color="#1989fa" line-height="2px" shrink>
        <van-tab title="好友" class="vantab">
          <div v-for="item in person" :key="item.id" class="listsm">
            <div class="lists">
              <img src="/1.jpg" alt="">
              <span class="sp2">{{ item.remarks }}</span>
              <span class="sp3">[{{ item.state }}在线]</span>
              <span class="sp4">{{ item.Dynamic }}</span>
            </div>
          </div>
        </van-tab>
        <van-tab title="分组">
          <p class="p1" @click="flag=false" v-if="flag=true"><van-icon name="arrow" ></van-icon>特别关心</p>
          <p class="p1" @click="flag=true" v-if="flag=false"><van-icon name="arrow-down"></van-icon>特别关心</p>
          <div v-for="item in spli" :key="item.id" class="listsm" v-show="!flag">
            <div class="lists">
              <img src="/1.jpg" alt="">
              <span class="sp2">{{ item.remarks }}</span>
              <span class="sp3">[{{ item.state }}在线]</span>
              <span class="sp4">{{ item.Dynamic }}</span>
            </div>
          </div>
        </van-tab>
        <van-tab title="群聊">
        </van-tab>
        <van-tab title="机器人">内容 4</van-tab>
        <van-tab title="设备">内容 5</van-tab>
        <van-tab title="通讯录">内容 6</van-tab>
      </van-tabs>
    </div>

  </div>
</template>

<style scoped>
.big {
  background-color: rgb(242, 241, 248);
}

.head {
  background-color: rgb(241, 245, 255);
  height: 50px;
  position: relative;
  top: 0;
}

.head img {
  width: 40px;
  height: 40px;
  border-radius: 50px;
  margin-top: 5px;
  margin-left: 5px
}

.sp1 {
  position: absolute;
  top: 10px;
  left: 51px;
  font-size: 15px;
  font-weight: 540;
}

.icon1 {
  position: absolute;
  top: 10px;
  left: 290px;
  font-size: 20px;
}

.search {
  background-color: rgb(241, 245, 255);
  height: 50px;
  top: 0;
  width: 100%;
}

.list {
  margin-top: 15px;
  background-color: rgb(255, 255, 255);
}

.listsm {
  position: relative;
  background-color: rgb(255, 255, 255);
}

.lists {
  padding-top: 15px;
  background-color: rgb(255, 255, 255);
}

.sp2 {
  position: absolute;
  top: 22px;
  left: 51px;
  font-size: 13px;
}

.list img {
  width: 42px;
  height: 40px;
  border-radius: 50px;
  margin-top: 5px;
  margin-left: 5px
}

.sp3 {
  position: absolute;
  top: 44px;
  left: 51px;
  font-size: 11px;
}

.sp4 {
  position: absolute;
  top: 44px;
  left: 106px;
  font-size: 11px;
}

.p1 {
  background-color: rgba(244, 244, 244, 0.394);
  font-size: 14px;
}</style>